<template>
	<el-switch
		v-model="switchValue"
		:size="configure?.size"
		:active-text="configure?.active?.label"
		:active-value="configure?.active?.value"
		:inactive-text="configure?.inactive?.label"
		:inactive-value="configure?.inactive?.value"
		:style="`--el-switch-on-color: ${configure.onColor || '#409eff'}; --el-switch-off-color: ${
			configure.offColor || '#DCDFE6'
		}`"
		:disabled="configure.disabled"
		@change="handleChange"
	/>
</template>
<script lang="ts" setup>
import { PropType, ref, watch } from "vue";
import { PySwitchType } from "./index";
import { debounce } from "@pureadmin/utils";

const props = defineProps({
	//双向绑定的值
	modelValue: {
		type: String,
		required: false,
		default: "",
	},
	configure: {
		type: Object as PropType<PySwitchType>,
		default: {
			disabled: false,
		},
	},
});
const switchValue = ref(props.modelValue || false);

watch(
	() => props.modelValue,
	val => {
		switchValue.value = val;
	},
	{ deep: true }
);
const emits = defineEmits(["update:modelValue", "onChange"]);

//change事件
const handleChange = debounce((state: any) => {
	props.configure.change && props.configure.change(state);
	emits("onChange", switchValue.value);
	emits("update:modelValue", switchValue.value);
});

//获取当前值
const getData = () => {
	return switchValue.value;
};

//设置当前值
const setData = (value: string) => {
	switchValue.value = value;
};

//暴露方法
defineExpose({ getData, setData });
</script>
